R = React.DOM

MyForm_1 = React.createFactory React.createClass(
  submitHandler: (event) ->
    event.preventDefault()
    helloTo = @refs.helloTo.value
    console.log helloTo
  render: ->
    R.form onSubmit: @submitHandler,
      R.input(ref: 'helloTo', type: 'text', defaultValue: 'Hello World!'),
      R.br(),
      R.button(type: 'submit', 'Speak')
)
ReactDOM.render MyForm_1(), document.getElementById('form01_container')

MyForm_2 = React.createFactory React.createClass(
  getInitialState: ->
    helloTo: 'Hello World!'
  handleChange: (event) ->
    @setState helloTo: event.target.value.toUpperCase()
  submitHandler: (event) ->
    event.preventDefault()
    console.log @state.helloTo
    @setState helloTo: ''
  render: ->
    R.form onSubmit: @submitHandler,
      R.label(htmlFor: 'name', 'Name:'),
      R.input(id: 'name', type: 'text', value: @state.helloTo, onChange: @handleChange),
      R.br(),
      R.button(type: 'submit', "Speak #{@state.helloTo}")
)
ReactDOM.render MyForm_2(), document.getElementById('form02_container')

MyForm_3 = React.createFactory React.createClass(
  getInitialState: -> options: ['B']
  handleChange: (event)->
    checked = []
    sel = event.target
    for option in sel.options
      checked.push(option.value) if option.selected
    @setState(options: checked)
  submitHandler: (event)->
    event.preventDefault()
    console.log @state.options
  render: ->
    R.form onSubmit: @submitHandler,
      R.select(multiple: true, value: @state.options, onChange: @handleChange,
        R.option(value: 'A', 'First Option'),
        R.option(value: 'B', 'Second Option'),
        R.option(value: 'C', 'Third Option')),
      R.br(),
      R.button(type: 'submit', 'Speak')
)
ReactDOM.render MyForm_3(), document.getElementById('form03_container')

MyForm_4 = React.createFactory React.createClass (
  submitHandler: (event) ->
    event.preventDefault()
    console.log @refs.checked.checked
  render: ->
    R.form onSubmit: @submitHandler,
      R.input(ref: 'checked', type: 'checkbox', value: 'A', defaultChecked: true)
      R.br()
      R.button(type: 'submit', 'Speak')
)
ReactDOM.render MyForm_4(), document.getElementById('form04_container')

MyForm_5 = React.createFactory React.createClass(
  getInitialState: -> checked: true
  handleChange: (event)->
    @setState checked: event.target.checked
  submitHandler: (event) ->
    event.preventDefault()
    console.log @state.checked
  render: ->
    R.form onSubmit: @submitHandler,
      R.input(type: 'checkbox', value: 'A', checked: @state.checked, onChange: @handleChange)
      R.br()
      R.button(type: 'submit', 'Speak')
)
ReactDOM.render MyForm_5(), document.getElementById('form05_container')

MyForm_6 = React.createFactory React.createClass(
  getInitialState: ->
    radio: 'B'
  handleChange: (event) ->
    @setState(radio: event.target.value)
  submitHandler: (event)->
    event.preventDefault()
    console.log @state.radio
  render: ->
    R.form onSubmit: @submitHandler,
      R.input(type: 'radio', value: 'A', checked: (@state.radio is 'A'), onChange: @handleChange),
      'A',
      R.br(),
      R.input(type: 'radio', value: 'B', checked: (@state.radio is 'B'), onChange: @handleChange),
      'B',
      R.br(),
      R.input(type: 'radio', value: 'C', checked: (@state.radio is 'C'), onChange: @handleChange),
      'C',
      R.br(),
      R.button(type: 'submit', 'Speak')
)
ReactDOM.render MyForm_6(), document.getElementById('form06_container')

MyForm_7 = React.createFactory React.createClass(
  getInitialState: ->
    given_name: ''
    family_name: ''
  handleChange: (name, event) ->
    newState = {}
    newState[name] = event.target.value
    @setState newState
  submitHandler: (event) ->
    event.preventDefault()
    words = ['Hi', @state.given_name, @state.family_name]
    console.log words.join(' ')

  render: ->
    R.form(onSubmit: @submitHandler,
      R.label(htmlFor: 'given_name', 'Given Name:')
      R.br()
      R.input(type: 'text', name: 'given_name', value: @state.given_name, onChange: @handleChange.bind(@, 'given_name'))
      R.br()
      R.label(htmlFor: 'family_name', 'Family Name')
      R.br()
      R.input(
        type: 'text',
        name: 'family_name',
        value: @state.family_name,
        onChange: @handleChange.bind(@, 'family_name'))
      R.br()
      R.button(type: 'submit', 'Speak')
    )
)
ReactDOM.render MyForm_7(), document.getElementById('form07_container')

MyForm_8 = React.createFactory React.createClass(
  getInitialState: ->
    given_name: ''
    family_name: ''
  handleChange: (event)->
    newState = {}
    newState[event.target.name] = event.target.value
    @setState newState
  submitHandler: (event) ->
    event.preventDefault()
    words = ['Hi', @state.given_name, @state.family_name]
    console.log words.join(' ')
  render: ->
    R.form(onSubmit: @submitHandler,
      R.label(htmlFor: 'given_name', 'Given Name:')
      R.br()
      R.input(type: 'text', name: 'given_name', value: @state.given_name, onChange: @handleChange)
      R.br()
      R.label(htmlFor: 'family_name', 'Family Name:')
      R.br()
      R.input(type: 'text', name: 'family_name', value: @state.family_name, onChange: @handleChange)
      R.br()
      R.button(type: 'submit', 'Speak')
    )
)
ReactDOM.render MyForm_8(), document.getElementById('form08_container')

MyForm_9 = React.createFactory React.createClass(
  mixins: [React.addons.LinkedStateMixin]
  getInitialState: ->
    given_name: ''
    family_name: ''
  submitHandler: (event) ->
    event.preventDefault()
    words = ['Hi', @state.given_name, @state.family_name]
    console.log words.join(' ')
  render: ->
    R.form(onSubmit: @submitHandler,
      R.label(htmlFor: 'given_name', 'Given Name:')
      R.br()
      R.input(type: 'text', name: 'given_name', valueLink: @linkState('given_name'))
      R.br()
      R.label(htmlFor: 'family_name', 'Family Name:')
      R.br()
      R.input(type: 'text', name: 'family_name', valueLink: @linkState('family_name'))
      R.br()
      R.button(type: 'submit', 'Speak')
    )
)
ReactDOM.render MyForm_9(), document.getElementById('form09_container')

# Custom Component
Radio = React.createFactory React.createClass(
  propTypes:
    onChange: React.PropTypes.func
  getInitialState: ->
    value: @props.defaultValue
  handleChange: (event) ->
    @props.onChange(event) if @props.onChange
    @setState value: event.target.value
  render: ->
    value = @props.value or @state.value
    children = for child,i in @props.children
      R.label(null,
        R.input(
          type: 'radio',
          name: @props.name,
          value: child.props.value,
          checked: child.props.value is value,
          onChange: @handleChange)
        child.props.children
        R.br()
      )
    R.span(@props, children)
)
MyForm_10 = React.createFactory React.createClass(
  submitHandler: (event) ->
    event.preventDefault()
    console.log @refs.radio.state.value
  render: ->
    R.form(onSubmit: @submitHandler,
      Radio(ref: 'radio', name: 'my_radio', defaultValue: 'B',
        R.option(value: 'A', 'First Option')
        R.option(value: 'B', 'Second Option')
        R.option(value: 'C', 'Third Option')
      )
      R.button(type: 'submit', 'Speak')
    )
)
ReactDOM.render MyForm_10(), document.getElementById('form10_container')

MyForm_11 = React.createFactory React.createClass(
  getInitialState: ->
    my_radio: 'B'
  handleChange: (event) ->
    console.log event.target
    @setState my_radio: event.target.value
  submitHandler: (event) ->
    event.preventDefault()
    console.log @state.my_radio
  render: ->
    R.form(onSubmit: @submitHandler,
      Radio(name: 'my_radio', value: @state.my_radio, onChange: @handleChange,
        R.option(value: 'A', 'First Option')
        R.option(value: 'B', 'Second Option')
        R.option(value: 'C', 'Third Option'))
      R.button(type: 'submit', 'Speak')
    )
)
ReactDOM.render MyForm_11(), document.getElementById('form11_container')